/**
 * 1000可出租 1001不可租 1002租赁中 1003已预定 1004 已下架
 */
<template>
  <div class="my-house">
    <div v-if="myHouseList.length > 0">
      <section class="item__i"  v-for="(item, index) in myHouseList" :key = "index" >
        <div class="status">{{status2txt(item.status)  || ''}}</div>
        <house-list :callComponent="'myHouse'" :house-info="item" v-if="item" :detailPath="+item.houseType === 2 ? '/apartmentDetail' : '/detail'" :key="index">
          <div class="btn-action" slot="BTaction">
            <x-button @click.native.stop="act(item.id, 'edit')" style="bottom: 0.9rem" v-if="+item.status === 1004" class="theme-bt bt-c btn-edit" mini>编辑</x-button>
            <x-button @click.native.stop="act(item.id, 'xiajia')" style ="bottom: 0" v-if="+item.status === 1000" class="theme-bt bt-c btn-xj" mini>下架</x-button>
            <x-button @click.native.stop="act(item.id, 'shangjia')" style="bottom: -0.6rem" v-if="+item.status === 1004" class="theme-bt bt-s btn-sj" mini>上架</x-button>
          </div>
        </house-list>
        <section class="desc" :class="{descNull: !item.checkProxyDesc}">
          <span v-if="item.checkProxyDesc">审核意见：{{item.checkProxyDesc }}</span>
          <div></div>
        </section>
      </section>
    </div>
    <no-data v-else><span slot="message">您还未发布房源哦~</span></no-data>
    <div class="btn-wrapper"><x-button type="primary" @click.native="addHouse">+新增房源</x-button></div>
  </div>
</template>
<script>
import houseList from '@/components/houseList'
import noData from '@/components/noData'
export default {
  components: {
    houseList,
    noData
  },
  data () {
    return {
      myHouseList: [],
      isTrue: false
    }
  },
  // computed: {
  //   List: function () {
  //     console.log(this.myHouseList)
  //     return this.myHouseList
  //   }
  // },
  created () {
    this.init()
  },
  beforeRouteLeave (to, from, next) {
    if (to.path.indexOf('houseInfo') !== -1 && to.path.indexOf('verifyHouse') !== -1 && to.path.indexOf('detail') !== -1 && to.path.indexOf('myHouse') !== -1) {
      this.isTrue = true
    }
    next()
  },
  destroyed () {
    // if (this.isTrue) {
    //   this.$router.replace('/user?userRole=landlord')
    // }
  },
  methods: {
    init () {
      let _this = this
      let data = {page: 1, pageSize: 10}
      this.$axiosPosting(this.$api.myHouseList, data).then(res => {
        if (res.code === '0000') {
          _this.myHouseList = res.data
          _this.$forceUpdate()
        }
      })
    },
    // 房屋状态  1000可出租 1001不可租 1002租赁中 1003已预定 1111待审核
    status2txt (status) {
      if (status === 1000) return '已上架'
      else if (status === 1005) return '待审核'
      else if (status === 1001) return '不可租'
      else if (status === 1002) return '租赁中'
      else if (status === 1003) return '已预定'
      else if (status === 1004) return '已下架'
      else if (status === 1006) return '已驳回'
      else return ''
    },
    act (id, act) {
      let _this = this
      let data = {id: id}
      if (act === 'xiajia') {
        _this.$axiosPosting(_this.$api.soldOutMyHouse, data).then(json => {
          if (json.code === '0000') {
            _this.init()
          }
        })
      }
      if (act === 'shangjia') {
        _this.$axiosPosting(_this.$api.putawayMyHouse, data).then(json => {
          if (json.code === '0000') {
            _this.init()
          }
        })
      }
      if (act === 'edit') {
        _this.$router.push({path: '/houseInfo', query: {id: id}})
      }
    },
    addHouse () {
      this.$router.push({path: '/verifyHouse'})
    }
  }
}
</script>
<style lang="less" scoped>
  
  .btn-action {
    position: relative;
  }
  .btn-sj {
    background: #ff9600;
    border-radius: 2px;
  }
  .btn-xj, .btn-edit {
    color: #504b4b;
    border-color: #999;
    border-radius: 2px;
  }
  .btn-edit {
    bottom: 33px;
    padding: 0 18px;
  }
  .btn-sj, .btn-xj {
    bottom: 0px;
    padding: 0 18px;
  }
  .btn-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    .weui-btn {
      border-radius: 0;
    }
  }
  .desc {
    font-size: 12px;
    color: #656565;
    padding-left: 18px;
  }
</style>
<style lang="less">
.my-house {
  padding-bottom: 44px;
  .item__i {
    border-bottom: 1px solid #ccc;
    position: relative;
    .ui-house-li {
      .house {
        padding-bottom: 0;
      }
    }
    .desc {
      height: 33px;
      line-height: 35px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .status {
      color:#ff3c00;
      font-size: 13px;
      position: absolute;
      right: 18px;
      top: 18px;
    }
    h3.name {
      display: block;
      text-overflow: ellipsis;
      width: 6.2rem;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .descNull {
    height: 19px !important;
  }
}
</style>
